.navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
}

.navigationBlock {
  display: flex;
  align-items: center;
  justify-content: center;
}

.buttonSelect p {
  color: var(--color-dark-900);
}

.button {
  cursor: pointer;

  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  padding: 0;

  color: var(--color-light-100);

  background: var(--color-dark-900);
  border: none;
  border-radius: 2px;
  box-shadow: none;

  transition: all 0.3s;

  &:focus {
    background: inherit;
    border: none;
    border-radius: 2px;
    box-shadow: none;
  }

  &:focus-visible {
    color: var(--color-light-100);
    border-radius: 2px;
    outline: 1px solid var(--color-info-900);
  }

  &:hover {
    color: var(--color-light-100);
    background-color: var(--color-dark-500);
    border-radius: 2px;
    box-shadow: none;

    &:active {
      background-color: var(--color-light-100);

      > p {
        color: var(--color-dark-900);
      }
    }
  }

  > .iconButtonPrevious {
    transform: rotate(90deg);

    width: 16px;
    height: 16px;
    padding: 0;

    fill: var(--color-light-100);

    &:active {
      background-color: var(--color-light-100);
      border-radius: 2px;
      fill: var(--color-dark-900);
    }
  }

  > .iconButtonNext {
    transform: rotate(270deg);

    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;

    fill: var(--color-light-100);

    &:active {
      background-color: var(--color-light-100);
      border-radius: 2px;
      fill: var(--color-dark-900);
    }
  }
}

.buttonSelect {
  cursor: pointer;

  box-sizing: border-box;
  width: 24px;
  height: 24px;
  margin-right: 8px;
  padding: 0;

  color: var(--color-dark-900);

  background-color: var(--color-light-100);
  border: none;
  border-radius: 2px;
  box-shadow: none;

  &:focus {
    background-color: var(--color-light-100);
    border: none;
    border-radius: 2px;
    box-shadow: none;
  }

  &:focus-visible {
    color: var(--color-light-100);
    border-radius: 2px;
    outline: 1px solid var(--color-info-900);
  }

  &:hover {
    color: var(--color-dark-900);
    background-color: var(--color-light-100);
    border-radius: 2px;
    box-shadow: none;
  }
}

.buttonCustom {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-right: 8px;

  background-color: var(--color-dark-900);

  &:hover {
    color: var(--color-light-100);
    background-color: var(--color-dark-500);
    border-radius: 2px;
  }

  &:focus-visible {
    color: var(--color-light-100);
    background-color: var(--color-dark-900);
    border-radius: 2px;
    outline: 1px solid var(--color-info-900);
  }

  &:focus {
    background-color: var(--color-dark-900);
    border-radius: 2px;
    box-shadow: none;

    &:hover {
      color: var(--color-light-100);
      background-color: var(--color-dark-500);
      border-radius: 2px;
    }
  }
}

.buttonDisabled:disabled {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  margin-right: 8px;
  padding: 0;

  color: var(--color-light-100);

  background: var(--color-dark-900);
  border: none;
  border-radius: 2px;
  box-shadow: none;

  > .iconButtonPrevious {
    transform: rotate(90deg);

    width: 16px;
    height: 16px;
    padding: 0;

    fill: var(--color-dark-100);
  }

  > .iconButtonNext {
    transform: rotate(270deg);

    width: 16px;
    height: 16px;
    margin: 0;
    padding: 0;

    fill: var(--color-dark-100);
  }
}

.typographyShow {
  margin-right: 6px;
  margin-left: 16px;
}

.typographyPage {
  margin-left: 12px;
}

.selectStyle {
  width: 50px;
  height: 24px;
}

.dods {
  width: 24px;
}
